<template>
	<view class="box">
		<!-- 搜索栏开始 -->
		<view class="search-box">
			<view class="input">
				<input placeholder="输入关键字" confirm-type="search" class="search-input" v-model="keywords"/>
			</view>
			<view class="text" @tap="search">
				<text class="search-text">搜索</text>
			</view>
		</view>
		<!-- 搜索栏结束 -->
		
		<!-- 搜索结果开始 -->
		<view class="search-result">
			<view class="title">
				搜索结果
			</view>
			<view class="search-list" v-if="courses.length">
				<course :courses="courses"></course>
			</view>
			<view class="record" v-else>
				<record></record>
			</view>
		</view>
		<!-- 搜索结果结束 -->
	</view>
</template>

<script>
	import course from '@/components/course.vue'
	import record from '@/components/record.vue'
	import {request} from '@/request/request.js'
	export default {
		components: {
			course,
			record
		},
		data() {
			return {
				courses:[],
				keywords:'',
			}
		},
		methods: {
			async search(){
				if(this.keywords.length === 0){
					uni.showToast({
						title: '请输入关键字'
					})
					return;
				}
				
				let res = await request({
					url:'/search',
					// keywords:this.keywords
					data:{
						keywords:this.keywords
					}
				})
				// console.log(res);
				this.courses = res.data.data.data
				// console.log('搜索：',res.data.data.data);
			}
		}
	}
</script>

<style scoped>
	@import "../../static/assets/fonts/iconfont.css";
 .search-box{
  width: 100%;
  height: 120rpx;
  box-sizing: border-box;
  padding: 25rpx 18rpx;
  background-color: white;
  display: flex;
 }
 .input{
     flex: 1;
 }
 .input .search-input{
	 width: 100%;
	 height: 32px;
	 background: rgba(242, 242, 242, 1);
	 border-radius: 18px;
	 box-sizing: border-box;
	 padding: 3px 15px;
	 font-size: 14px;
 }
 .search-box .text{
	 padding-left: 15px;
	 font-size: 16px;
	 color: #333;
	 font-weight: 400;
	 line-height: 32px;
 }
 .search-result{
	 width: 100%;
	 height: auto;
	 padding: 40rpx 30rpx;
	 margin-top: 30rpx;
	 box-sizing: border-box;
 }
 .search-result .title{
	width: 100%;
	height: auto;
	float: left;
	font-size: 16px;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 16px;
	margin-bottom: 10px;
 }
 .record{
	 width: 100%;
	 height: auto;
	 float: left;
	 font-size: 32px;
	 font-weight: 600;
	 color: rgba(51, 51, 51, 1);
	 line-height: 32px;
	 margin-bottom: 30px;
 }
</style>
